<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input placeholder="请输用户名/邮箱/密码" v-model="content" size="small" style="width: 200px"></el-input>
        <el-button type="success" style="margin-left: 10px" size="mini" @click="doquery()"><i class="iconfont icon-search"></i>查询 </el-button>
        <el-button type="primary" size="mini" @click="toadd()"><i class="iconfont icon-add"></i>添加</el-button>
        <el-button type="danger" size="mini" @click="deleteRol()"><i class="iconfont icon-delete"></i>批量删除</el-button>
      </el-col>
      <el-col :span="12" style="display: flex;justify-content: flex-end;">
        <el-button-group>

        </el-button-group>
      </el-col>
    </el-row>

    <el-table :data="roles" ref="multipleTable" stripe style="width: 100%" size="mini" @selection-change="selectTableRows" @row-click="roleClick">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" sortable label="ID" width="60"></el-table-column>
      <el-table-column prop="name" sortable label="角色" width="100"></el-table-column>
      <el-table-column prop="remark" label="备注" width="200"></el-table-column>
      <el-table-column prop="createBy" label="创建人" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" :formatter="timeFormatter"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="warning" size="mini">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteRol(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="formVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="form" size="small">
        <el-form-item label="角色" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色备注" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    <div>
    <h3>角色菜单设置</h3>
      <el-tree :props="treeProps"  ref="tree" :data="roleMenu"  show-checkbox node-key="id"  default-expand-all :expand-on-click-node="false">
      <div slot-scope="{ node, data }" style="display: flex;justify-content: flex-start">

          <template v-if="data.type=='0'">
            <div style="width: 120px">{{data.name}}</div>
            <div style="width: 80px;">
               <el-tag type="success" size="mini"> 目录</el-tag>
            </div>
          </template>

         <template v-else-if="data.type == '1'">
          <div style="width:100px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="danger" size="mini">菜单</el-tag>
          </div>
        </template>
        <template v-else="data.type == '2'">
          <div style="width:80px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="warning" size="mini">按钮</el-tag>
          </div>
        </template>

        <div style="width: 100px">
          <i :class="['iconfont',data.icon]"></i>
        </div>
        <div style="width: 100px">
          {{data.parentName}}
        </div>
        <div style="width: 100px">
          {{data.url}}
        </div>
        <div style="width: 100px">
          {{data.perms}}
        </div>
      </div>
    </el-tree>
      <div style="display: flex;margin-right: 50px;justify-content: flex-end" >
        <el-button size="small">重置</el-button>
        <el-button size="small" type="primary" @click="submitRoleMenu">提交</el-button>
      </div>




    </div>


  </div>

</template>

<script>
  import axios from "axios"
  import qs from "qs"
    export default {
        data() {
          return {
            content: "",
            roles: [],
            total: 100,
            currentPage: 1,
            pageSize: 10,
            title: "",
            formVisible: false,
            formLabelWidth: "100px",
            form: {},
            selectedRoleId:0,
            //角色菜单设置
            roleMenu: [ ],
            treeProps: {
              children: 'children',
              label: 'name'
            }
          }
        },
      methods:{
          //角色菜单选择
        submitRoleMenu(){
          var that = this;
          axios.post("/sys/role/updateRoleMenu",qs.stringify({
            roleId:that.selectedRoleId,
            menuIds:that.$refs.tree.getCheckedKeys().join(","),//通过join方法可以将数组连成字符串
          })).then(function (response) {
            var mes = response.data.message;
            if (response.data.code == "200") {
              that.$notify({
                title: '成功',
                message: mes,
                type: 'success'
              });
              that.page()
            } else {
              that.$notify.error({
                title: '失败',
                message: mes,
              });
            }

          })

          this.page();

        },
        roleClick(row, column, event){
          var that = this;
          this.selectedRoleId = row.id;
          axios.get("/sys/role/selectMenuIdsByRoleId/"+row.id).then(res=>{

            that.$refs.tree.setCheckedKeys(res.data);
          })

        },
        getMenu(){
          var that = this;
          axios.get("/sys/menu/getMenu").then(function (response) {
            that.roleMenu = response.data;
            // console.log(that.roleMenu);

          })
        },
        timeFormatter(row){
          return row.createTime.substring(0,10)
        },
          //查询
        doquery(){
          this.currentPage = 1;
          this.page();
        },
        //复选框选中行
        selectTableRows(val){
          this.ids = val;
          var idd = "";
          for (var i = 0; i < this.ids.length; i++) {
            idd = idd + "," + this.ids[i].id
          }
          idd = idd.substring(1);
          this.deleteIds = idd
        },
        //删除
        deleteRol(){
          var that = this;
          axios.get("/sys/role/delete",{
              params:{
                "idd":that.deleteIds
              }
            }
          ).then(function (response) {
            var mes = response.data.message;
            if (response.data.code == "200") {
              that.$notify({
                title: '成功',
                message: mes,
                type: 'success'
              });
              that.page()
            } else {
              that.$notify.error({
                title: '失败',
                message: mes,
              });
            }
          })
        },
        toadd(){
          this.formVisible = true;
          this.title = "添加角色";
          this.form = {};
        },
        toEdit(row){
          this.formVisible = true;
          this.title = "编辑角色";
          var data = this.copy(row);
          this.form = data;
        },
        copy(obj) {
          var newobj = {};
          for (var attr in obj) {
            newobj[attr] = obj[attr];
          }
          return newobj;
        },
        save(){
          this.formVisible = false;
          //进行保存的操作
          var that = this;
          axios.post("/sys/role/save", qs.stringify(this.form)).then(function (response) {
            var mes = response.data.message;
            if (response.data.code == "200") {
              that.$notify({
                title: '成功',
                message: mes,
                type: 'success'
              });
            } else {
              that.$notify.error({
                title: '失败',
                message: mes,
              });
            }
          })
          this.page();
        },

        //分页相关
        pageSizeChange(val) {
          this.pagesize = val;
          this.page()
        },
        pageChange(val) {
          this.currentPage = val;
          this.page();
          // console.log(this.currentPage)//2
        },
        page() {
          var that = this;
          axios.get("/sys/role/list", {
            params: {
              content: that.content,
              pageSize: that.pageSize,
              cPage: that.currentPage
            }
          }).then(function (response) {

            that.roles = response.data.rows;
            that.total = response.data.total;
          })
        }
      },
      mounted(){
        this.page();
        this.getMenu();
      }
    }
</script>

<style scoped>

</style>
